<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
  <style>
    ul {
      display: flex;
    }

    li {
      list-style: none;
      width: 30px;
      text-align: center;
    }

    .active {
      background: blue;
      color: white;
    }

    .asc {
      width: 10px;
      height: 10px;
      transform: rotate(90deg);
      display: inline-block;
      background: url('./1.png');
      background-size: cover;
    }

    .desc {
      width: 10px;
      height: 10px;
      transform: rotate(-90deg);
      display: inline-block;
      background: url('./1.png');
      background-size: cover;
    }

    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dialog {
      width: 300px;
      height: 260px;
      background-color: white;
    }
  </style>
</head>

<body>
  <div id="app">
    搜索 <input type="text" v-model="txt" @keyup.enter="search">
    <button @click="search">搜索</button>
    <table>
      <tr>
        <td>职位名称</td>
        <td>

          <span>薪水</span>
          <span :class="{asc:isAsc,desc:!isAsc}" @click="sort()"></span>

        </td>
        <td>操作</td>
      </tr>
      <tr v-for="item in getdatalist">
        <td>{{item.positionName}}</td>
        <td>{{item.salary}}</td>
        <td>
          <button @click="edit(item)">编辑</button>
          <button @click="del(item._id)">删除</button>
        </td>
      </tr>
    </table>

    <!-- 翻页开始 -->
    <ul>
      <li v-for="n in getPages" :class="{active:n===pageno}" @click="changePage(n)">{{n}}</li>
    </ul>
    <!-- 翻页结束 -->

    <custom-dialog v-if="isShowEdit" 
      :pos="position" 
      @updateevent="update"
      @close="isShowEdit=false"
    ></custom-dialog>

  </div>

  <script type="text/template" id="temp">
    <div class="mask">
       <div class="dialog">
          职位名称： 
          <input v-model="position.positionName" type="text">
          <button @click="submit">提交</button>
          <button @click="$emit('close')">取消</button>
       </div>
    </div>
  </script>


  <script>


    Vue.component('custom-dialog', {
      props: ['pos'],
      data() {
        return {
          position: {}
        }
      },
      mounted() {
        //数据的复制
        this.position = Object.assign({}, this.pos)
      },
      template: `#temp`,
      methods: {
        submit() {
          this.$emit('updateevent', this.position)
        }
      }
    })

    var vm = new Vue({
      el: '#app',
      created() {
        fetch('./data.json').then((res) => res.json())
          .then(res => {
            console.log(res);
            this.datalist = res.data;
          })
      },
      data: {
        //是否显示编辑对话框
        isShowEdit: false,
        //是否为正序
        isAsc: true,
        //搜索输入框输入的关键字
        txt: '',
        keyword: '',
        //第几页的页码
        pageno: 1,
        //每页展示的数据条数
        pagesize: 5,
        //原始的数据列表
        datalist: [],
        //编辑时，需要读取的数据
        position: {}
      },
      computed: {
        getPages() {
          //模糊查询
          let list = this.datalist.filter((item, index) => {
            var reg = new RegExp(this.keyword, 'i')
            return reg.test(item.positionName);
          })
          return Math.ceil(list.length / this.pagesize)
        },
        getdatalist() {

          //模糊查询
          let list = this.datalist.filter((item, index) => {
            var reg = new RegExp(this.keyword, 'i')
            return reg.test(item.positionName);
            // return item.positionName.indexOf(this.keyword) > -1;
          })

          //排序
          list = list.sort((a, b) => {
            let salaryA = parseInt(a.salary.replace(/k/gi, '000'))
            let salaryB = parseInt(b.salary.replace(/k/gi, '000'))
            if (this.isAsc) {
              return salaryA - salaryB;
            } else {
              return salaryB - salaryA;
            }
          })


          let startIndex = (this.pageno - 1) * this.pagesize;
          let endIndex = startIndex + this.pagesize;
          return list.slice(startIndex, endIndex)
        }
      },
      methods: {
        del(id) {
          //找到需要删除的数据
          this.datalist.forEach((item, index) => {
            if (item._id === id) {
              this.datalist.splice(index, 1)
            }
          })
          // this.datalist.splice(index,1)
        },
        changePage(n) {
          this.pageno = n;
        },
        //搜索
        search() {
          //重置页码
          this.pageno = 1;
          this.keyword = this.txt
        },
        //排序
        sort() {
          this.isAsc = !this.isAsc;
        },
        //显示编辑对话框
        edit(item) {
          this.isShowEdit = true;
          this.position = item;
        },
        //数据更新
        update(pos) {
          this.datalist.find((item,index)=>{
            if(pos._id===item._id){
              this.datalist.splice(index,1,pos)
              return true;
            }
          })
          // console.log(pos);
          this.isShowEdit = false;

        }
      }

    })

  </script>

</body>

</html>